<template>
  <div>
    <div class="app-container">
      <!-- 上 -->
      <el-card class="up-card">
        <div>
          <!-- 上 -->
          <div slot="header" class="up">
            <span><i class="el-icon-search" />筛选搜索</span>
            <div>
              <el-button size="mini">重置</el-button>
              <el-button type="primary" size="mini">查询搜索</el-button>
            </div>
          </div>
          <!-- 下 -->
          <div class="down">
            <div class="item">
              输入搜索:
              <el-input
                v-model="input"
                placeholder="账号/姓名"
                style="width: 200px"
              />
            </div>
          </div>
        </div>
      </el-card>
      <!-- /上 -->
    </div>

    <!-- 中 -->
    <div class="app-container">
      <el-card class="zh-card">
        <div class="zh">
          <span><i class="el-icon-tickets" />数据列表</span>
          <el-button size="mini">添加</el-button>
        </div>
      </el-card>
    </div>

    <div class="app-container">
      <el-card>
        <el-table :data="tableData" border>
          <el-table-column prop="num" label="编号" />
          <el-table-column prop="zhangh" label="账号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="email" label="邮箱" /><el-table-column
            prop="addtame"
            label="添加时间"
          /><el-table-column
            prop="lastlogin"
            label="最后登录"
          /><el-table-column prop="open" label="是否开启">
            <template slot-scope="take">
              <el-switch
                v-model="take.row.value"
                :active-value="1"
                :inactive-value="0"
                @change="changeValue($event, value)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作"
          ><template v-slot="{ row }">
            <el-button
              type="text"
              @click="assignMenu(row.id)"
            >分配菜单</el-button>
            <el-button
              type="text"
              @click="Allocateresources(row.id)"
            >分配资源</el-button>
            <el-button
              type="text"
              @click="editPermissson(row.id)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="delPermission(row.id)"
            >删除</el-button>
          </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div id="ddd" class="el-pagination is-background">
      <span class="el-pagination__total">共 5 条</span><el-pagination
        :page-sizes="[15, 20, 30]"
        :page-size="100"
        layout="sizes, prev, pager, next"
        :total="15"
      /><span
        class="el-pagination__jump"
      >前往
        <div class="el-input el-pagination__editor is-in-pagination">
          <!----><input
            type="number"
            autocomplete="off"
            min="1"
            class="el-input__inner"
            max="1"
          ><!----><!----><!---->
        </div>
        页</span>
    </div>
  </div>
</template>

<script>
import { UserInfo } from '@/api/quanxian'
export default {
  data() {
    return {
      value: true,
      input: '',
      //   page: {
      //   page: 1, // 当前页码
      //   size: 10,
      //   total: 0 // 总数
      // },
      tableData: [
        {
          num: '1',
          zhangh: 'test',
          name: '测试账号',
          email: 'test@qq.com',
          addtime: '2018-09-29 13:55:30',
          lastlogin: '2018-09-29 13:55:39',
          value: 1
        },
        {
          num: '3',
          zhangh: 'admin',
          name: '系统管路员',
          email: 'admin@qq.com',
          addtime: '2022-10-15 19:28',
          lastlogin: '2019-04-20 12:45:16',
          value: 1
        },
        {
          num: '4',
          zhangh: 'macro',
          name: 'macro',
          email: 'macro@qq.com',
          addtime: '2019-10-06 15:53:51',
          lastlogin: '2020-02-03 14:55:55',
          value: 1
        },
        {
          num: '6',
          zhangh: 'productAdmin',
          name: '商品管理员',
          email: 'productt@qq.com',
          addtime: '2020-02-07 16:15:08',
          lastlogin: 'N/A',
          value: 1
        },
        {
          num: '7',
          zhangh: 'orderAdmin',
          name: '订单管理员',
          email: 'order@qq.com',
          addtime: '2020-02-07 16:15:50',
          lastlogin: 'N/A',
          value: 1
        }
      ]
    }
  },
  // methods: {
  //   changePage(newPage) {
  //   this.page.page = newPage
  //   this.getEmployeeList()
  // }
  // },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const res = await UserInfo()
      console.log(res)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
.up-card {
  .up {
    display: flex;
    justify-content: space-between;
  }
}

.zh-card {
  .zh {
    display: flex;
    justify-content: space-between;
  }
}

#ddd {
  display: flex;
  // justify-content: space-around;
  float: right;
  margin-right: 20px;
  justify-content: center;
  align-items: center;
  .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: #606266;
  }
  .el-select .el-input .el-select__caret {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform 0.3s;
    transform: rotate(180deg);
    line-height: 16px;
    cursor: pointer;
  }
  .el-input__icon {
    height: 100%;
    width: 25px px;
    text-align: center;
    transition: all 0.3s;
    line-height: 40px;
  }
  .el-input__inner {
    padding-right: 25px;
    border-radius: 3px;
    height: 28px;
  }
}
</style>
